<template>
  {{ Object.keys($slots) }}
  <el-input v-bind="$attrs" ref="myInput">
    <!-- 处理具名插槽 -->
    <!-- <template v-for="name in Object.keys($slots)" :key="name" #[name]="{slotData}">
      <slot :name="name" v-bind="slotData || {}"></slot>
    </template> -->
  </el-input>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, useAttrs, useSlots } from "vue";
/**
 * 封装组件需要处理的问题
 * 1. 处理具名插槽
 * 2. 处理 ref
 * 3. 处理 attrs
*/
// 定义 props，允许外部控制 inheritAttrs
const props = defineProps({
  inheritAttrs: {
    type: Boolean,
    default: false, // 默认不继承属性
  },
});

interface ExposedMethods {
  [key: string]: (...args: any[]) => any;
}

console.log(useSlots());


const exposedMethods: ExposedMethods = {};
const myInput = ref(null);
const attrs = useAttrs();

// 在组件挂载后处理 ref
onMounted(() => {
  if (myInput.value) {
    const inputElement = myInput.value as Record<string, any>;
    for (const key of Object.keys(inputElement)) {
      const value = inputElement[key];
      if (typeof value === 'function') {
        exposedMethods[key] = value.bind(inputElement);
      }
    }
  }

  // 条件编译，仅在开发环境中输出日志
  if (import.meta.env.DEV) {
    console.log(attrs);
  }
});

defineExpose(exposedMethods);
</script>

<style scoped lang="scss"></style>